<template>
  <div>
    <div class="nav">
          <h1>猫眼电影</h1>
      </div>
    <div class="xiaoshipin" v-if="smallVideo" ref="smallbox" @touchmove="moresmall">
      <template v-for="(item, index) in smallVideo">
        <small-videoItem :key="index" :item="item"></small-videoItem>
      </template>
    </div>
    
    <div class="goTop" v-if="smallVideo.length!=0 && isShow" ref="shipinBox" @click="goTop">
      <span> <i class="iconfont icon-top" aria-hidden="true"></i></span>
    </div>
  </div>
</template>

<script>
import SmallVideoItem from "@/components/SmallVideoItem.vue";
import _ from 'lodash';

export default {
  data() {
    return {
      smallVideo: [],
      smallPage: 1,
      isShow:false,
    };
  },
  created() {
    this.getsmall();
  },
  mounted(){
    window.addEventListener("scroll",this.scrollbar);
  },
  beforeDestroy(){
    window.removeEventListener("scroll",this.scrollbar);
  },
  methods: {
    async getsmall() {
      let re = await this.axios.get("video/short/0");
      this.smallVideo = re.data.data.feeds;
    },
    moresmall() {
      let boxHeight = this.$refs.smallbox.offsetHeight - 620;
      let distance = window.scrollY;
      if (distance >= boxHeight) {
        console.log(1);
        if (this.smallHandle) {
          this.smallHandle = false;
          if (this.smallTimer) {
            clearTimeout(this.smallTimer);
          }
          let that = this;
          this.smallTimer = setTimeout(function () {
            this.axios.get("video/short/" + that.smallPage).then((re) => {
              let arr = re.data.data.feeds;
              console.log(arr);
              arr.forEach(item=>{
                that.smallVideo.push(item);
              })
              that.smallHandle=true;
            });
          }, 200);
          that.smallPage++;
        }
      }
    },
    scrollbar:_.throttle(function(){
      let boxHeight = this.$refs.smallbox.offsetHeight-566;
      let distance = window.scrollY;
      let el=document.documentElement||document.body;
      let b=el.clientHeight;
      if(distance>b){
        this.isShow=true;
      }else{
        this.isShow=false;
      }
      if (distance >= boxHeight) {
          this.axios.get("video/short/" + this.smallPage).then((re) => {
            let arr = re.data.data.feeds;
            arr.forEach(item=>{
              this.smallVideo.push(item);
            })
          });
        this.smallPage++;
      }
    },500),
    goTop(){
      document.body.scrollTop=document.documentElement.scrollTop=0;
    },
  },
  components: {
    SmallVideoItem,
  },
};
</script>

<style lang="less" scoped>
.nav{
  background-color: #e54847;
  padding: 6px;
  height: 38px;
  line-height: 38px;
  color: #fff;
  text-align: center;
  font-size: 18px;
}
.xiaoshipin {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-bottom: 50px;
  & > div {
    margin-bottom: 1px;
  }
}

.goTop{
  position: fixed;
  top: 500px;
  left: 10px;
  z-index: 15;
  line-height: 30px;
  // background: rgba(0, 0, 0, .5);
  // display: inline-block;
  span{
    display: inline-block;
    background: rgba(0, 0, 0, .8);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    text-align: center;
    color: white;
  }
}
</style>